<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理</title>
</head>
<body>
  <div id="root">
  </div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
    /*
    *  Vue中为什么要使用数据代理 ---->为了访问数据更加简便
    *
    *  Vue模板可以访问vm中所有的数据，定义在new Vue()构造函数中的配置对象data会被
    *  vm对象收集到_data属性中，如果没有数据代理的话，我们在Vue模板中要使用{{_data.属性名}}
    *  的方式进行访问很麻烦
    *
    *  使用数据代理的话可以直接通过{{属性名}}进行访问，为什么可以这么操作呢？
    *
    *  vue底层通过Objects.defineProperties()函数将vm._data中的属性名定义到vm中，
    *  也就是说vm对象拥有了和vm._data属性一样的属性名。但之所以被称为数据代理，不是说vm内的属性
    *  是通过_data里的属性赋值而来的，而是因为Objects.defineProperties()的存在，Vue模板直接访问
    *  属性名本质上是通过getter函数获得_data内的属性名
    *
    *  这样对_data内的数据进行一次包装，使得外部更好的访问数据
    *
    *   对比在React中就没有所谓的数据代理，Vue之所以有数据代理是因为vm对象将数据收集到_data中(new Vue构造函数中传入的data:{}只不过是配置对象而已，正真正的数据保存在_data中
    *   React也是一样将数据定义在state中，只不过Vue为了方便使用通过封装不需要使用_data.属性名了
    *   而React中没有进行封装，必须使用this.state.属性名
    *
    * */


    new Vue({
        el:'#root',
        data:{
        }
    })
</script>
</body>
</html>